<template>
    <div class="box">
        <div class="loginForm">
            <h2 style="margin-bottom: 20px;display: block;text-align: center;">用户登录</h2>
            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
                label-position="left">
                <el-form-item label="用户名" prop="userId">
                    <el-input type="text" v-model="ruleForm.userId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="vcode">
                    <el-input type="text" v-model="ruleForm.vcode" class="vinput"></el-input>
                    <div><el-image style="width: 100px; height: 40px;line-height: 40px;margin-left: 100px;" :src="imageCode"
                            fit="" @click="handnew"></el-image></div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleForm)">登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getVcode, Login } from '@/api/api'
export default {
  data () {
    return {
      ruleForm: {
        password: '',
        // checkPass: '',
        userId: '',
        vcode: ''
      },
      imageCode: ''
    }
  },
  methods: {
    submitForm (formName) {
      const params = {
        userId: formName.userId,
        password: formName.password,
        vcode: formName.vcode
      }
      Login(params).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          this.$store.commit('setToken', res.data.data.token)
          this.$store.commit('setUserId', res.data.data.userId)
          this.$store.commit('setImageUrl', res.data.data.imageUrl)
          this.$store.commit('setCurrentId', res.data.data.id)
          this.$message('登陆成功')
          this.$router.push(this.$route.query.redirect)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    handnew () {
      const params = {}
      getVcode(params).then(res => {
        console.log(res.data)
        this.imageCode = res.data.data.imageCode
      })
    }
  },
  mounted () {
    this.axios.get('http://localhost:9999/user/vcode').then(res => {
      console.log(res.data)
      this.imageCode = res.data.data.imageCode
    })
  }
}

</script>

<style lang="scss" scoped>
.box {
    width: auto;
    height: auto;
    border: 1px solid #ccc;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loginForm {
    margin: 20px;
}

.vinput {
    width: 80px;
    margin-right: 20px;
    position: absolute;
}
</style>
